
<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>数据分析</title>
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <link rel="stylesheet" href="/static/component/pear/css/pear.css"/>
  <script src="/static/component/layui/layui.js"></script>
  <script src="/static/component/pear/pear.js"></script>
  <link rel="stylesheet" href="/static/css/console.css" />
</head>

<body class="pear-container">
<div class="">
  <div class="layui-row layui-col-space10">
    <div class="layui-col-md8">
      <div class="layui-row layui-col-space10">
        <div class="layui-col-md6">
          <div class="layui-card">
            <div class="layui-card-header">
              快捷菜单
            </div>
            <div class="layui-card-body">
              <div class="layui-row layui-col-space10">
                <div class="layui-col-md3 layui-col-sm3 layui-col-xs3">
                  <div class="shortcut-menu" data-id="home1" data-title="主页"
                       data-url="http://www.baidu.com">
                    <i class="layui-icon layui-icon-home"></i>
                  </div>
                  <span class="shortcut-menu-label">主页</span>
                </div>
                <div class="layui-col-md3 layui-col-sm3 layui-col-xs3">
                  <div class="shortcut-menu" data-id="home2" data-title="弹层"
                       data-url="http://www.baidu.com">
                    <i class="layui-icon layui-icon-camera"></i>
                  </div>
                  <span class="shortcut-menu-label">弹层</span>
                </div>
                <div class="layui-col-md3 layui-col-sm3 layui-col-xs3">
                  <div class="shortcut-menu" data-id="home2" data-title="聊天"
                       data-url="http://www.baidu.com">
                    <i class="layui-icon layui-icon-star"></i>
                  </div>
                  <span class="shortcut-menu-label">聊天</span>
                </div>
                <div class="layui-col-md3 layui-col-sm3 layui-col-xs3">
                  <div class="shortcut-menu" data-id="home3" data-title="相机"
                       data-url="http://www.baidu.com">
                    <i class="layui-icon layui-icon-camera"></i>
                  </div>
                  <span class="shortcut-menu-label">相机</span>
                </div>
                <div class="layui-col-md3 layui-col-sm3 layui-col-xs3">
                  <div class="shortcut-menu" data-id="home4" data-title="表单"
                       data-url="http://www.baidu.com">
                    <i class="layui-icon layui-icon-console"></i>
                  </div>
                  <span class="shortcut-menu-label">表单</span>
                </div>
                <div class="layui-col-md3 layui-col-sm3 layui-col-xs3">
                  <div class="shortcut-menu" data-id="home5" data-title="安全"
                       data-url="http://www.baidu.com">
                    <i class="layui-icon layui-icon-auz"></i>
                  </div>
                  <span class="shortcut-menu-label">安全</span>
                </div>
                <div class="layui-col-md3 layui-col-sm3 layui-col-xs3">
                  <div class="shortcut-menu" data-id="home6" data-title="公告"
                       data-url="http://www.baidu.com">
                    <i class="layui-icon layui-icon-cart"></i>
                  </div>
                  <span class="shortcut-menu-label">公告</span>
                </div>
                <div class="layui-col-md3 layui-col-sm3 layui-col-xs3">
                  <div class="shortcut-menu" data-id="home7" data-title="更多"
                       data-url="http://www.baidu.com">
                    <i class="layui-icon layui-icon-app"></i>
                  </div>
                  <span class="shortcut-menu-label">更多</span>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="layui-col-md6">
          <div class="layui-card">
            <div class="layui-card-header">
              代办任务
            </div>
            <div class="layui-card-body">
              <div class="layui-row layui-col-space10">
                <div class="layui-col-md6 layui-col-sm6 layui-col-xs6">
                  <div class="deputy">
                    <div class="deputy-label">待审评论</div>
                    <div class="deputy-count">21</div>
                  </div>
                </div>
                <div class="layui-col-md6 layui-col-sm6 layui-col-xs6">
                  <div class="deputy">
                    <div class="deputy-label">待审帖子</div>
                    <div class="deputy-count">32</div>
                  </div>
                </div>
                <div class="layui-col-md6 layui-col-sm6 layui-col-xs6">
                  <div class="deputy">
                    <div class="deputy-label">待审文章</div>
                    <div class="deputy-count">14</div>
                  </div>
                </div>
                <div class="layui-col-md6 layui-col-sm6 layui-col-xs6">
                  <div class="deputy">
                    <div class="deputy-label">待审用户</div>
                    <div class="deputy-count">63</div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="layui-col-md12">
          <div class="layui-card">
            <div class="layui-card-body">
              <div class="layui-tab custom-tab layui-tab-brief" lay-filter="docDemoTabBrief">
                <div id="echarts-records-1" style="min-height:400px;"></div>
              </div>
            </div>
          </div>
          <div class="layui-card">
            <div class="layui-card-body" style="padding-top: 15px; padding-bottom: 15px;">
              <table class="layui-hide" id="ID-table-demo-data"></table>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="layui-col-md4">
      <div class="layui-card">
        <div class="layui-card-header">留言板</div>
        <div class="layui-card-body">
          <ul class="message-board">
            <li>
              <p>要不要作为我的家人，搬来我家。</p>
              <span>12月25日 19:92</span>
              <a href="javascript:;" data-id="1"
                 class="layui-btn layui-btn-primary layui-btn-xs message-board-reply">回复</a>
            </li>
            <li>
              <p>快乐的时候不敢尽兴，频繁警戒自己保持清醒。</p>
              <span>4月30日 22:43</span>
              <a href="javascript:;" data-id="1"
                 class="layui-btn layui-btn-primary layui-btn-xs message-board-reply">回复</a>
            </li>
            <li>
              <p>夏天真的来了，尽管它还有些犹豫。</p>
              <span>4月30日 22:43</span>
              <a href="javascript:;" data-id="1"
                 class="layui-btn layui-btn-primary layui-btn-xs message-board-reply">回复</a>
            </li>
            <li>
              <p>看似不可达到的高度，只要坚持不懈就可能到达。</p>
              <span>4月30日 22:43</span>
              <a href="javascript:;" data-id="1"
                 class="layui-btn layui-btn-primary layui-btn-xs message-board-reply">回复</a>
            </li>
            <li>
              <p>当浑浊变成了一种常态，那么清白就成了一种罪过。</p>
              <span>4月30日 22:43</span>
              <a href="javascript:;" data-id="1"
                 class="layui-btn layui-btn-primary layui-btn-xs message-board-reply">回复</a>
            </li>
            <li>
              <p>那是一种内在的东西，他们到达不了，也无法触及！</p>
              <span>5月12日 01:25</span>
              <a href="javascript:;" data-id="1"
                 class="layui-btn layui-btn-primary layui-btn-xs message-board-reply">回复</a>
            </li>
            </li>
            <li>
              <p>希望是一个好东西,也许是最好的,好东西是不会消亡的！</p>
              <span>6月11日 15:33</span>
              <a href="javascript:;" data-id="1"
                 class="layui-btn layui-btn-primary layui-btn-xs message-board-reply">回复</a>
            </li>
            <li>
              <p>一切都在不可避免的走向庸俗。</p>
              <span>2月09日 13:40</span>
              <a href="javascript:;" data-id="1"
                 class="layui-btn layui-btn-primary layui-btn-xs message-board-reply">回复</a>
            </li>
            <li>
              <p>路上没有灯火的时候，就点亮自己的头颅。</p>
              <span>3月11日 12:30</span>
              <a href="javascript:;" data-id="1"
                 class="layui-btn layui-btn-primary layui-btn-xs message-board-reply">回复</a>
            </li>

            <li>
              <p>我们应该不虚度一生，应该能够说：＂我已经做了我能做的事。＂</p>
              <span>4月30日 22:43</span>
              <a href="javascript:;" data-id="1"
                 class="layui-btn layui-btn-primary layui-btn-xs message-board-reply">回复</a>
            </li>
            </li>
            <li>
              <p>接近，是我对一切的态度，是我对一切态度的距离</p>
              <span>6月11日 15:33</span>
              <a href="javascript:;" data-id="1"
                 class="layui-btn layui-btn-primary layui-btn-xs message-board-reply">回复</a>
            </li>
            <li>
              <p>没有锚的船当然也可以航行，只是紧张充满你的一生。</p>
              <span>2月09日 13:40</span>
              <a href="javascript:;" data-id="1"
                 class="layui-btn layui-btn-primary layui-btn-xs message-board-reply">回复</a>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</div>
<script>
  layui.use(['layer', 'echarts', 'carousel', 'element', 'table'], function () {
    var $ = layui.jquery,
            layer = layui.layer,
            element = layui.element,
            echarts = layui.echarts,
            table = layui.table,
            carousel = layui.carousel;

    var inst = table.render({
      elem: '#ID-table-demo-data',
      cols: [[
        { field: 'id', title: 'ID', width: 80, sort: true },
        { field: 'username', title: '用户', width: 120 },
        { field: 'sex', title: '性别', width: 80 },
        { field: 'sign', title: '签名', minWidth: 160 },
        { field: 'city', title: '城市', width: 80 },
        { field: 'experience', title: '状态', width: 80, sort: true }
      ]],
      data: [{
        "id": "10001",
        "username": "瑞诺科技低代码",
        "sex": "男",
        "city": "山东",
        "sign": "饥食西山稻，渴饮本源泉。寒披无相服，热来松下眠。知身无究竟，任运了残年。",
        "experience": "在线"
      }, {
        "id": "10002",
        "username": "瑞诺科技低代码",
        "sex": "男",
        "city": "山东",
        "sign": "饥食西山稻，渴饮本源泉。寒披无相服，热来松下眠。知身无究竟，任运了残年。",
        "experience": "在线",
      }, {
        "id": "10003",
        "username": "瑞诺科技低代码",
        "sex": "男",
        "city": "山东",
        "sign": "饥食西山稻，渴饮本源泉。寒披无相服，热来松下眠。知身无究竟，任运了残年。",
        "experience": "在线"
      }, {
        "id": "10004",
        "username": "瑞诺科技低代码",
        "sex": "男",
        "city": "山东",
        "sign": "饥食西山稻，渴饮本源泉。寒披无相服，热来松下眠。知身无究竟，任运了残年。",
        "experience": "在线"
      }, {
        "id": "10005",
        "username": "瑞诺科技低代码",
        "sex": "男",
        "city": "山东",
        "sign": "饥食西山稻，渴饮本源泉。寒披无相服，热来松下眠。知身无究竟，任运了残年。",
        "experience": "在线"
      }, {
        "id": "10006",
        "username": "瑞诺科技低代码",
        "sex": "男",
        "city": "山东",
        "sign": "饥食西山稻，渴饮本源泉。寒披无相服，热来松下眠。知身无究竟，任运了残年。",
        "experience": "在线"
      }, {
        "id": "10007",
        "username": "瑞诺科技低代码",
        "sex": "男",
        "city": "山东",
        "sign": "饥食西山稻，渴饮本源泉。寒披无相服，热来松下眠。知身无究竟，任运了残年。",
        "experience": "在线"
      }],
      page: false
    });


    var echartsRecordsOne = echarts.init(document.getElementById('echarts-records-1'), 'walden');

    $("body").on("click", "[data-url]", function () {
      parent.layui.tab.addTabOnlyByElem("content", {
        id: $(this).attr("data-id"),
        title: $(this).attr("data-title"),
        url: $(this).attr("data-url"),
        close: true
      })
    })

    let color = [
      "#0090FF",
      "#36CE9E",
      "#FFC005",
      "#FF515A",
      "#8B5CFF",
      "#00CA69"
    ];
    let echartData = [{
      name: "1",
      value1: 100,
      value2: 233
    },
      {
        name: "2",
        value1: 138,
        value2: 233
      },
      {
        name: "3",
        value1: 350,
        value2: 200
      },
      {
        name: "4",
        value1: 173,
        value2: 180
      },
      {
        name: "5",
        value1: 180,
        value2: 199
      },
      {
        name: "6",
        value1: 150,
        value2: 233
      },
      {
        name: "7",
        value1: 180,
        value2: 210
      },
      {
        name: "8",
        value1: 230,
        value2: 180
      }
    ];

    let xAxisData = echartData.map(v => v.name);
    //  ["1", "2", "3", "4", "5", "6", "7", "8"]
    let yAxisData1 = echartData.map(v => v.value1);
    // [100, 138, 350, 173, 180, 150, 180, 230]
    let yAxisData2 = echartData.map(v => v.value2);
    // [233, 233, 200, 180, 199, 233, 210, 180]
    const hexToRgba = (hex, opacity) => {
      let rgbaColor = "";
      let reg = /^#[\da-f]{6}$/i;
      if (reg.test(hex)) {
        rgbaColor =
                `rgba(${parseInt("0x" + hex.slice(1, 3))},${parseInt(
                        "0x" + hex.slice(3, 5)
                )},${parseInt("0x" + hex.slice(5, 7))},${opacity})`;
      }
      return rgbaColor;
    }

    optionOne = {
      color: color,
      legend: {
        right: 10,
        top: 10
      },
      tooltip: {
        trigger: "axis",
        formatter: function (params) {
          let html = '';
          params.forEach(v => {
            html +=
                    `<div style="color: #666;font-size: 14px;line-height: 24px">
					                <span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${color[v.componentIndex]};"></span>
					                ${v.seriesName}.${v.name}
					                <span style="color:${color[v.componentIndex]};font-weight:700;font-size: 18px">${v.value}</span>
					                万元`;
          })
          return html
        },
        extraCssText: 'background: #fff; border-radius: 0;box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);color: #333;',
        axisPointer: {
          type: 'shadow',
          shadowStyle: {
            color: '#ffffff',
            shadowColor: 'rgba(225,225,225,1)',
            shadowBlur: 5
          }
        }
      },
      grid: {
        top: 100,
        containLabel: true
      },
      xAxis: [{
        type: "category",
        boundaryGap: false,
        axisLabel: {
          formatter: '{value}月',
          textStyle: {
            color: "#333"
          }
        },
        axisLine: {
          lineStyle: {
            color: "#D9D9D9"
          }
        },
        data: xAxisData
      }],
      yAxis: [{
        type: "value",
        name: '单位：万千瓦时',
        axisLabel: {
          textStyle: {
            color: "#666"
          }
        },
        nameTextStyle: {
          color: "#666",
          fontSize: 12,
          lineHeight: 40
        },
        splitLine: {
          lineStyle: {
            type: "dashed",
            color: "#E9E9E9"
          }
        },
        axisLine: {
          show: false
        },
        axisTick: {
          show: false
        }
      }],
      series: [{
        name: "2018",
        type: "line",
        smooth: true,
        symbolSize: 8,
        zlevel: 3,
        lineStyle: {
          normal: {
            color: color[0],
            shadowBlur: 3,
            shadowColor: hexToRgba(color[0], 0.5),
            shadowOffsetY: 8
          }
        },
        areaStyle: {
          normal: {
            color: new echarts.graphic.LinearGradient(
                    0,
                    0,
                    0,
                    1,
                    [{
                      offset: 0,
                      color: hexToRgba(color[0], 0.3)
                    },
                      {
                        offset: 1,
                        color: hexToRgba(color[0], 0.1)
                      }
                    ],
                    false
            ),
            shadowColor: hexToRgba(color[0], 0.1),
            shadowBlur: 10
          }
        },
        data: yAxisData1
      }, {
        name: "2019",
        type: "line",
        smooth: true,
        symbolSize: 8,
        zlevel: 3,
        lineStyle: {
          normal: {
            color: color[1],
            shadowBlur: 3,
            shadowColor: hexToRgba(color[1], 0.5),
            shadowOffsetY: 8
          }
        },
        areaStyle: {
          normal: {
            color: new echarts.graphic.LinearGradient(
                    0,
                    0,
                    0,
                    1,
                    [{
                      offset: 0,
                      color: hexToRgba(color[1], 0.3)
                    },
                      {
                        offset: 1,
                        color: hexToRgba(color[1], 0.1)
                      }
                    ],
                    false
            ),
            shadowColor: hexToRgba(color[1], 0.1),
            shadowBlur: 10
          }
        },
        data: yAxisData2
      }]
    };

    echartsRecordsOne.setOption(optionOne);
    setTimeout(() => {
      echartsRecordsOne.resize();
    }, 500)

    window.onresize = function () {
      echartsRecordsOne.resize();
    }

  });
</script>
</body>

</html>
